<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="9">
                <el-card class="box-card top">
                    <el-row>
                        <el-col :span="6" style="text-align: center">
                            <el-avatar :size="90" :src="currLoginUser.header"></el-avatar>
                        </el-col>
                        <el-col :span="18" class="top-user-name">欢迎您，{{currLoginUser.name}}</el-col>
                        <el-col :span="16" style="font-size: 14px;">
                            2019-11-28 晴 29'C
                        </el-col>
                    </el-row>
                    <!--<el-row>
                        <el-col :span="6" class="top-info-1">
                            待办事项
                        </el-col>
                        <el-col :span="6" class="top-info-2">
                            未读消息
                        </el-col>
                        <el-col :span="12"></el-col>
                    </el-row>-->
                </el-card>
            </el-col>
            <el-col :span="15">
                <el-card class="box-card top">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多通知</el-button>
                    </div>
                    <div>
                        <el-tag v-if="notices.length" v-for="(item, index) in notices" :key="index"
                                effect="plain" type="info"
                                style="width: 100%;height: auto;border-radius: 2px;margin-bottom: 5px;">
                            <h4 style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                                {{item.title}} <p style="text-align: right">{{item.addTime}} </p>
                            </h4>
                        </el-tag>
                        <div v-else class="notice-list__none">
                            唉哟~没有通知啦！
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-card class="box-card bottom">
                    <div slot="header" class="clearfix">
                        <span>卡片名称</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <div v-for="o in 4" :key="o" class="text item">
                        {{'列表内容 ' + o }}
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "MainIndex",
        computed: {
            currLoginUser: {
                get: function () {
                    return this.currLoginUserStr ? JSON.parse(this.currLoginUserStr) : null;
                },
                set: function (val) {
                }
            }
        },
        data() {
            return {
                notices: [],
                currLoginUserStr: sessionStorage.getItem("currLoginUser"),
            }
        }, methods: {
            handleShowNotice() {
                // this.$httpGet(this.$axiosBaseHttp, "api/rest/notice/list", {}).then(res => {
                //     if (res.code === 200) {
                //         this.notices = res.data;
                //     }
                // })
                this.$httpGet(this.$axiosBaseHttp, "api/rest/notice/list/page", {}).then(res => {
                    if (res.code === 200) {
                        this.notices = res.data.records;
                    }
                })
            },
        }, mounted() {
            this.handleShowNotice();
        }
    }
</script>

<style scoped lang="scss">
    .el-row {
        margin-bottom: 10px;
    }

    .top {
        height: 300px;
        /*background: #00ff00 url('index-top-left.jpg') no-repeat fixed center;*/
        /*background-image: url("index-top-left.jpg")  no-repeat fixed center;*/
    }

    .top-info-1 {
        font-size: 10px;
        text-align: center;
    }

    .top-info-2 {
        font-size: 10px;
        text-align: left;
    }

    .top-user-name {
        font-size: 25px;
        margin: 10px 0 5px 0;
    }

    .bottom {
        height: calc(100vh - 335px);
    }

    /deep/ {

        .el-card__body {
            padding: 15px;
            overflow-y: scroll;
            height: 230px;
        }

    }
</style>
